<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>太阳系</title>
    <style type="text/css">
        *{
            margin:0;
            padding: 0;
        }
        canvas{
            display: block;
            background: #000;
            margin: auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="900"; height="900";>您的浏览器不支持canvas绘图标签，请您跟换浏览器</canvas>
<script type="text/javascript">

    var can=document.getElementById("canvas");
    //设置绘图的环境
    var ctx=can.getContext("2d");
  /*  //设置圆形半径
    ctx.arc(400,400,100,0,Math.PI*2,false);
    ctx.strokeStyle="red";
    ctx.stroke();//触笔方法，绘制空心圆*/
    //绘制轨道
    function drawTrack(){
        ctx.strokeStyle="#fff";
        for(var i=0;i<8;i++){
            ctx.beginPath();//开始路径
            ctx.arc(450,450,(i+1)*50,0,Math.PI*2,false);
            ctx.stroke();//空心
        }
    }
    drawTrack();
    //绘圆制实心圆
    //设置渐变色 径向:内圆（坐标，半径）外圆（坐标，半径）
    /*var color=ctx.createRadialGradient(450,450,0,450,450,20);
    color.addColorStop(0,"#f00");//起始位置 0 颜色
//    color.addColorStop(0.5,"#f0f");//起始位置 0 颜色
    color.addColorStop(1,"#ff0");//结束为止 1
    ctx.beginPath();//开始路径
    ctx.fillStyle=color;
    ctx.arc(450,450,20,0,Math.PI*2,false);
    ctx.fill();//实心 填存方法

    //重新改变坐标系 另外开辟一个空间
   ctx.save();//保存之前的画布信息
    ctx.translate(450,450);//吧canvas画布坐标原点移动到（450,450）；
    ctx.beginPath();
    ctx.arc(0,50,10,0,Math.PI*2,false)
    ctx.fill()*/
    var time=0;
    function drawStar(x,y,r,cycle,sColor,eColor){
        ctx.save();
        ctx.translate(450,450);
        ctx.rotate(time*Math.PI*(360/cycle)/180);//旋转 弧度 Math.PI*角度
        ctx.beginPath();
        ctx.arc(x,y,r,0,Math.PI*2,false);


        var color=ctx.createRadialGradient(x,y,0,x,y,r);
        color.addColorStop(0,sColor);//起始位置 0 颜色
        color.addColorStop(1,eColor);//结束为止 1
        ctx.fillStyle=color;
        ctx.fill();
        ctx.restore();//释放之前保存的内容
        time+=.1;
    }
    setInterval(function(){
        //先清空画布
        ctx.clearRect(0,0,900,900);
        drawTrack();
        drawStar(0,0,20,0,"#f00","#ff0");
        drawStar(50,0,10,88,"#f00","#ff0");
        drawStar(100,0,25,224,"#f00","#ff0");
        drawStar(150,0,15,365,"#f00","#ff0");
        drawStar(200,0,10,687,"#f00","#ff0");
        drawStar(250,0,5,4333,"#f00","#ff0");
        drawStar(300,0,30,10760,"#f00","#ff0");
        drawStar(350,0,10,30799,"#f00","#ff0");
        drawStar(400,0,25,60512,"#f00","#ff0");
    },30)



















</script>
</body>
</html>